<template>
  <div class="page-header-index-wide">
    <!-- <div style="max-width: 48%;min-width: 48%;">
      <a-row :gutter="24">
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="今日零售" data-step="2" data-title="今日零售" data-intro="统计零售的金额">
            <a-tooltip title="统计零售的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.todayRetailSale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="销售订单" data-step="3" data-title="销售订单" data-intro="统计销售订单的金额">
            <a-tooltip title="统计销售订单的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.todayBuy"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="销售出库" data-step="1" data-title="零食出库" data-intro="统计销售出库的金额">
            <a-tooltip title="统计销售出库的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.todaySale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="采购退货">
            <a-tooltip title="统计采购退货的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.monthSale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="盘盈">
            <a-tooltip title="统计盘盈的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.monthRetailSale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="收入单">
            <a-tooltip placement="left" title="统计收入单的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.monthBuy"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="收款单">
            <a-tooltip title="统计收款单的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yesterdaySale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="收预付款">
            <a-tooltip title="统计收预付款的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yesterdayRetailSale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="零售退货">
            <a-tooltip title="统计零售退货的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yesterdayBuy"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="销售退货">
            <a-tooltip title="统计销售退货的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yearSale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="采购订单">
            <a-tooltip title="统计采购订单的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yearRetailSale"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="采购入库">
            <a-tooltip placement="left" title="统计采购入库的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yearBuy"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="盈亏">
            <a-tooltip placement="left" title="统计盈亏的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yearBuy"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="支出单">
            <a-tooltip placement="left" title="统计支出单的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yearBuy"></head-info>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
          <chart-card :loading="loading" title="付款单">
            <a-tooltip placement="left" title="统计付款单的金额" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <head-info :content="statistics.yearBuy"></head-info>
          </chart-card>
        </a-col>
      </a-row>
    </div> -->

    <div style="width: 50%;min-width: 50%;max-width: 50%;background-color: white;padding: 20px;min-height: 600px;">
      <!-- <div style="width: 100%;min-width: 100%;max-width: 100%;background-color: white;padding: 20px;min-height: 600px;"> -->
      <div class="date-selector">
        <!-- 日期选择部分，可以使用ant-ui的相关组件实现 -->
        <!-- <a-select v-model="selectedYear" placeholder="年份">
        <a-option v-for="year in years" :key="year" :value="year">{{year}}</a-option>
      </a-select>
      <a-select v-model="selectedMonth" placeholder="月份">
        <a-option v-for="month in months" :key="month" :value="month">{{month}}</a-option>
      </a-select> -->
        <!-- <a-month-picker size="default" v-model="date" placeholder="请选择日期" /> -->
        <a-range-picker v-model="date" @change="changeDate" />
        <!-- <a-month-picker size="default" v-model="date" placeholder="请选择日期" /> -->
        <!-- 其他时间筛选按钮 -->

        <a-button @click="filterData('last7Days')">近7天</a-button>
        <a-button @click="filterData('last30Days')">近30天</a-button>
        <a-button @click="filterData('last90Days')">近90天</a-button>
        <a-button @click="filterData('lastHalfYear')">近半年</a-button>
        <!-- <a-button @click="filterData('last7Days')">近7天</a-button> -->
        <!-- 收支类型 -->
      </div>
      <div class="date-selector">
        <a-select placeholder="请选择收支类型" allowClear style="width: 150px;" v-model="queryParam.type"
          @change="changeLabel">
          <a-select-option value="收入">收入</a-select-option>
          <a-select-option value="支出">支出</a-select-option>
        </a-select>
        <a-button type="primary" @click="search()">搜索</a-button>
        <a-button type="default" @click="reset()">重置</a-button>
      </div>
      <a-spin :spinning="spinning">
        <div id="charts" ref="charts">
          <div class="pie-chart-section">
            <h2>收支占比情况</h2>
          </div>
        </div>
      </a-spin>
      <div class="profit-section">
        <div class="item">
          <span class="label">总收入：</span>
          <span class="value" :class="{ 'positive': income > 0, 'negative': income < 0 }">￥{{ income }}</span>
        </div>
        <div class="item">
          <span class="label">总支出：</span>
          <span class="value" :class="{ 'positive': expense > 0, 'negative': expense < 0 }">￥{{ expense }}</span>
        </div>
        <a-popover title="提示">
          <template #content>
            总盈亏 = 总收入-总支出
          </template>
          <div class="item" title="123">
            <span class="label">总盈亏：</span>
            <span class="value" :class="{ 'positive': profit > 0, 'negative': profit < 0 }">￥{{ profit }}</span>
          </div>
        </a-popover>
      </div>
    </div>
  </div>
</template>
<script>
import ChartCard from '@/components/ChartCard'
import moment from 'moment';
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import Trend from '@/components/Trend'
import { getBuyAndSaleStatistics, buyOrSalePrice, getPlatformConfigByKey, getFinancialState } from '@/api/api'
// import { handleIntroJs } from "@/utils/util"
import { getAction, postAction } from '../../api/manage'

export default {
  name: "IndexChart",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      date: [],
      spinning: false,
      selectedYear: '2024',
      selectedMonth: '08',
      // 模拟数据
      income: 0,
      expense: 0,
      profit: 0,
      pieChartData: [],
      years: ['2024'], // 可以根据需求扩展年份
      months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      queryParam: {},
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 18,
        offset: 1
      },
      hovered: false,
      systemTitle: window.SYS_TITLE,
      systemUrl: window.SYS_URL,
      loading: true,
      center: null,
      statistics: {},
      barHeight: document.documentElement.clientHeight - 585,
      yaxisText: '金额',
      retailPriceData: [],
      visitInfo: [],
      startTime1: '',
      startTime2: ''
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  mounted() {
    this.initPieChart()
    this.GetFinancialState()
  },
  methods: {
    reset() {
      this.queryParam = {}
      this.date.splice(0, this.date.length)
      this.startTime1 = ''
      this.startTime2 = ''
      this.GetFinancialState()
    },
    search() {
      this.GetFinancialState()
    },
    changeLabel(e) {
      this.queryParam.type = e
    },
    changeDate(e) {
      console.log(e, 'e');
      this.startTime1 = e[0].format('YYYY-MM-DD')
      this.startTime2 = e[1].format('YYYY-MM-DD')
    },
    GetFinancialState() {
      this.spinning = true
      getFinancialState(
        {
          startTime1: this.startTime1,
          startTime2: this.startTime2,
          type: this.queryParam.type ? this.queryParam.type : ''
        }
      ).then(res => {
        if (res && res.code === 200) {
          this.income = res.data.amountIncome
          this.expense = res.data.amountExpenditure
          this.profit = res.data.profitLoss
          this.pieChartData.splice(0, this.pieChartData.length)
          res.data.typeList.forEach(item => {
            this.pieChartData.push({
              value: item.amount,
              name: item.type
            })
          })
          this.initPieChart()
        }
      }).catch(err => {
        console.log(err);
      }).finally(() => {
        setTimeout(() => {
          this.spinning = false
        }, 200)
      })
    },
    initPieChart() {
      const chartDom = this.$refs.charts
      const myChart = this.$echarts.init(chartDom);
      const option = {
        title: {
          text: '收支占比情况',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} : {d}% <br/>{b} : {c}'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '60%',
            data: this.pieChartData,
            // 显示占比
            // label: {
            //   formatter: '{b} : {c} ({d}%)' 
            // },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    filterData(timeRange) {
      // 根据不同的时间范围，这里需要发送请求获取对应的数据并更新页面展示
      let currentDate = new Date();
      if (timeRange === 'last7Days') {
        // 获取近7天的日期,取开始时间和结束时间
        this.date.splice(0, this.date.length)
        this.startTime2 = currentDate.toISOString().split('T')[0];
        this.date.push(moment(this.startTime2, 'YYYY-MM-DD'))
        currentDate.setDate(currentDate.getDate() - 6);
        this.startTime1 = currentDate.toISOString().split('T')[0];
        this.date.unshift(moment(this.startTime1, 'YYYY-MM-DD'))
        this.GetFinancialState()
      } else if (timeRange === 'last30Days') {
        // 获取近30天的日期
        this.date.splice(0, this.date.length)
        this.startTime2 = currentDate.toISOString().split('T')[0];
        this.date.push(moment(this.startTime2, 'YYYY-MM-DD'))
        currentDate.setDate(currentDate.getDate() - 29);
        this.startTime1 = currentDate.toISOString().split('T')[0];
        this.date.unshift(moment(this.startTime1, 'YYYY-MM-DD'))
        this.GetFinancialState()
      } else if (timeRange === 'last90Days') {
        // 获取近90天的日期
        this.date.splice(0, this.date.length)
        this.startTime2 = currentDate.toISOString().split('T')[0];
        this.date.push(moment(this.startTime2, 'YYYY-MM-DD'))
        currentDate.setDate(currentDate.getDate() - 89);
        this.startTime1 = currentDate.toISOString().split('T')[0];
        this.date.unshift(moment(this.startTime1, 'YYYY-MM-DD'))
        this.GetFinancialState()
      } else if (timeRange === 'lastHalfYear') {
        // 获取近半年的日期
        this.date.splice(0, this.date.length)
        this.startTime2 = currentDate.toISOString().split('T')[0];
        this.date.push(moment(this.startTime2, 'YYYY-MM-DD'))
        currentDate.setMonth(currentDate.getMonth() - 5);
        this.startTime1 = currentDate.toISOString().split('T')[0];
        this.date.unshift(moment(this.startTime1, 'YYYY-MM-DD'))
        this.GetFinancialState()
      }
      this.initPieChart();
    },
    showCustomDateSelector() {
      // 实现自定义日期筛选功能，弹出日期选择框等操作
    },
    searchQuery() {
      // this.loadData(1);
    }
  }
}
</script>
<style lang="less" scoped>
#charts {
  min-width: 600px;
  margin-top: 30px;
  min-height: 450px;
  border-radius: 2px;
  background: white;
}

.page-header-index-wide {
  justify-content: space-between;
  display: flex;
}

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

.date-selector {
  margin-bottom: 20px;
  gap: 5px;
  display: flex;
}

.profit-section {
  display: flex;
  // margin: 30px 0;
  justify-content: space-around;
}

.item {
  // margin-right: 20px;
}

.label {
  display: inline-block;
  margin-right: 10px;
  font-weight: bold;
  font-size: 20px;
  // width: 80px;
}

.positive {
  color: green;
}

.negative {
  color: red;
}

.pie-chart-section {
  margin-top: 20px;
}
</style>